<!--
* 功能-页面实现
* Date: 2023-7-22
* Author: 徐富强
 -->
<template>
  <layout-card
    v-model='search'
    :filters='isExampleOptions'
    headline='信息列表'
    headtitle='数据筛选'
    :hasButton="true"
    @search-change='searchChange'
    @search-reset='searchReset'
  >
    <template #action>
      <el-button type='primary' @click='handleExport' :disabled="isDisabled">导出</el-button>
    </template>
    <table-common
      :columns='exampleColumns'
      :loading='loading'
      :pagination='pager'
      :table-data='tableData'
      size='large'
      @current-change='currentChange'
      @size-change='sizeChange'
      @sort-change='sortChange'
      stripe
    >
    </table-common>
  </layout-card>
</template>

<script lang='ts' setup>
import { ref, onBeforeMount, reactive } from 'vue'
// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { exampleColumns } from '@/views/pax/loveService/config/columns'
import { exampleOptions } from '@/views/pax/loveService/config/filters'
import {
  PageListType,
  problemPageList,
  loveExport
} from '@/api/pax/loveService'
import { getResource } from '@/api/resource'
import { dayjs } from 'element-plus'
const isExampleOptions = ref(exampleOptions)
interface SearchType {
  serviceTime: string[]
  serviceName: string
  askContent: string
  region: string
  enquiryType: string[]
  condition?: {
    region: string
    enquireType: string[]
  }
}
const isDisabled = ref(true)
const loading = ref(false)
const tableData = ref([])
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 1,
  condition: {}
})
const search = ref<SearchType>({})
/**
  * 功能-获取数据、分页查询
  * Date: 2023-7-24
  * Author: 骆成洋、范豪
  */
const getData = async () => {
  loading.value = true
  const payload: PageListType = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: {}
  }
  // 查询条件
  // 排序
  if (pager.condition.order) {
    payload.condition.order = pager.condition.order || []
  }
  // 服务人员
  if (search.value.serviceName) {
    payload.serviceName = search.value.serviceName || ''
  }
  // 记录人
  if (search.value.askContent) {
    payload.recorder = search.value.askContent || ''
  }
  // 开始，结束时间
  if (search.value.serviceTime && search.value.serviceTime?.length > 0) {
    payload.startTime =
      search.value.serviceTime[0] || ''
        ? dayjs(search.value.serviceTime[0] || '').format('YYYY-MM-DD HH:mm')
        : ''
    payload.endTime =
      search.value.serviceTime[1] || ''
        ? dayjs(search.value.serviceTime[1] || '').format('YYYY-MM-DD HH:mm')
        : ''
  }
  // 接机类型
  if (search.value.region) {
    payload.condition.region = search.value.region || ''
  }
  // 服务类型
  if (search.value.enquiryType && search.value.enquiryType?.length > 0) {
    payload.condition.enquiryType = search.value.enquiryType
  }
  // 分页信息列表
  const res = await problemPageList(payload)

  // 转换
  const res1 = await getResource('pax_love_service_child')
  const res2 = await getResource('pax_love_service')
  isExampleOptions.value[3].inputProps.options = res1.data.properties.meta
  isExampleOptions.value[0].inputProps.options = res2.data.properties.meta
  res.data.list.forEach((item) => {
    for (const i of isExampleOptions.value[3].inputProps.options) {
      if (i.value === item.serviceTypeChild) {
        item.serviceTypeChild = i.label
      }
    }
    for (const i of isExampleOptions.value[0].inputProps.options) {
      if (i.value === item.serviceType) {
        item.serviceType = i.label
      }
    }
  })
  if (res.data.list.length === 0) {
    isDisabled.value = true
  } else {
    isDisabled.value = false
  }
  loading.value = false

  tableData.value = res.data.list
  pager.total = res.data.total
  pager.pageCount = pager.total===0? 1:Math.ceil(pager.total / pager.pageSize)
}
/**
 * 功能-获取区域数据
 * Date: 2023-7-24
 * Author: 骆成洋
 */
const getLoveAirportArea = async () => {
  const res = await getResource('pax_love_service')
  isExampleOptions.value[0].inputProps.options = res.data.properties.meta
}

/**
 * 功能-获取爱心接机、送机的数据
 * Date: 2023-7-24
 * Author: 骆成洋
 */
const getLoveAirportDropOff = async () => {
  const res = await getResource('pax_love_service_child')
  isExampleOptions.value[3].inputProps.options = res.data.properties.meta
}
/**
 * 分页
 */
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}
/**
 * 点击查询
 * @param data 数据
 */
const searchChange = (data: FilterDataType) => {
  pager.currentPage = 1
  search.value = data
  getData()
}

/**
 * 功能-点击排序
 * Date: 2023-7-26
 * Author: 骆成洋、徐富强
 * @param value 排序规则
 */
const sortChange = (value) => {
  const sort = value.order?.slice(0, -6) || 'desc'
  let order = []
  if (value.prop === 'serviceTime') {
    order = [{ column: 'service_time', method: sort }]
  } else if (value.prop === 'recordTime') {
    order = [{ column: 'record_time', method: sort }]
  } else if (value.prop === 'syncTime') {
    order = [{ column: 'sync_time', method: sort }]
  }
  pager.condition.order = order
  getData()
}

/**
 * 点击重置
 * @param data 数据
 */
const searchReset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  getData()
}

/**
 * 功能-点击导出方法
 * Date: 2023-7-24
 * Author: 侯强
 */
const handleExport = () => {
  const payload: PageListType = {}
  if (search.value.serviceName) {
    payload.serviceName = search.value.serviceName || ''
  }
  // 记录人
  if (search.value.askContent) {
    payload.recorder = search.value.askContent || ''
  }
  // 开始，结束时间
  if (search.value.serviceTime && search.value.serviceTime?.length > 0) {
    payload.serviceTimeStart =
      search.value.serviceTime[0] || ''
        ? dayjs(search.value.serviceTime[0] || '').format('YYYY-MM-DD HH:mm')
        : ''
    payload.serviceTimeEnd = search.value.serviceTime[1] || ''
      ? dayjs(search.value.serviceTime[1] || '').format('YYYY-MM-DD HH:mm')
      : ''
  }
  // 接机类型
  if (search.value.region) {
    payload.serviceType = search.value.region || ''
  }
  // 服务类型
  if (search.value.enquiryType && search.value.enquiryType?.length > 0) {
    payload.serviceTypeChild = search.value.enquiryType
  }

  loveExport(payload)
    .then((res) => {
      console.log(payload)
      const link = document.createElement('a')
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.setAttribute(
        'download',
        `爱心服务管理${dayjs().format('YYYYMMDD')}.xlsx`
      )
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
    .catch((err: any) => {
      ElMessage.error(err?.message || '导出失败')
    })
}

onBeforeMount(getData)
onBeforeMount(getLoveAirportArea)
onBeforeMount(getLoveAirportDropOff)
</script>
